<template>
  <div class="layer-manager">
    <el-tree
      style="max-width: 100%; overflow: auto;"
      :data="data"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      :render-content="renderContent"
      @check-change="(node, checked) => {
        if (checked) {
          handleSelectedNodes([node], viewer);
        } else {
          handleUnselectedNodes([node], viewer);
        }
      }"
    />
    <NodeEditor
      v-if="showEditor"
      :node="currentNode"
      :visible="showEditor"
      :data="data"
      @close="closeEditor"
    />
  </div>
</template>

<script setup>
import { ref, watch, inject } from 'vue';
import { ElTree, ElSlider, ElTooltip, ElButton } from 'element-plus';
import { handleSelectedNodes, handleUnselectedNodes, updateLayerOpacity } from '../../utils/layerUtils'; // 导入移除图层的函数
// import { addNode, deleteNode, updateNode, findNode } from '../../utils/treeNodeUtils'; // 导入节点操作函数
import { computed } from 'vue';
import { useStore } from 'vuex';
import NodeEditor from './NodeEditor.vue'; // 引入新组件

const store = useStore();
const viewer = computed(() => store.state.viewer).value;

const props = defineProps({
  visible: Boolean
});
const visible = ref(props.visible);
const defaultProps = {
  children: 'children',
  label: 'label',
};

watch(() => props.visible, (newVal) => {
  visible.value = newVal;
});

// 自定义节点渲染
const renderContent = (h, { node, data }) => {
  const labelStyle = {
    display: 'inline-block',
    width: '120px', // 设置统一的宽度
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    verticalAlign: 'middle',
  };

  return h('div', { style: { display: 'flex', alignItems: 'center' } }, [
    h('span', {
      style: labelStyle,
      class: 'scrolling-label',
      title: node.label // 添加 title 属性，鼠标悬停时显示完整文本
    }, node.label.length > 8 ? node.label : node.label),
    data.showSlider && h(ElSlider, {
      modelValue: data.opacity || 100,
      'onUpdate:modelValue': (value) => {
        data.opacity = value; // 更新透明度
        updateLayerOpacity(viewer, data, value); // 更新图层透明度
      },
      style: { width: '100px', marginLeft: '10px' }
    }),
    data.showSlider && h(ElButton, {
      // 加大字体尺寸，加粗
      style: { fontSize: '20px', fontWeight: 'bold', marginLeft: '50px', border: 'none' },
      props: {
        type: 'link',
      },
      class: 'el-icon-minus',
      onclick: () => {
        openEditor(data); // 打开编辑器
      }
    }, () => '···')
  ]);
};


const data = ref([
  {
    id: 1,
    label: '瓦片地图',
    children: [
      {
        id: 12,
        label: '国内源',
        children: [
          {
            id: 13,
            label: '高德矢量底图',
            showSlider: true,
            type: "tile",
            url: "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
            opacity: 100 // 初始透明度为 100
          },
          {
            id: 14,
            label: '高德卫星影像',
            type: "tile",
            url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            showSlider: true,
            opacity: 100 // 初始透明度为 100
          },
          {
            id: 15,
            label: '高德路网注记',
            type: "tile",
            url: "https://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
            showSlider: true,
            opacity: 100 // 初始透明度为 100
          },
          {
            id: 16,
            label: '高德大字体电子地图',
            type: "tile",
            url: "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
            showSlider: true,
            opacity: 100 // 初始透明度为 100
          },
          {
            id: 17,
            label: 'ArcGIS World卫星图',
            type: "tile",
            url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
            showSlider: true,
            opacity: 100 // 初始透明度为 100
          },
          {
            id: 17,
            label: 'Mapbox卫星混合图',
            type: "tile",
            url: "https://api.mapbox.com/styles/v1/mapbox-official/ckpqknefy216x17t9b07w8xmf/tiles/{z}/{x/2}/{y/2}?access_token=pk.eyJ1IjoibWFwYm94LW9mZmljaWFsIiwiYSI6ImNrcHBnMG5yMDA2eWgyb2s5MDI4NG10OXAifQ.S65o8bcu6oqsp6HQnWYJfw",
            showSlider: true,
            opacity: 100 // 初始透明度为 100
          },
          {
            id: 18,
            label: '10m等高线地图',
            type: "tile",
            url: "https://c.tile.opentopomap.org/{z}/{x}/{y}.png",
            showSlider: true,
            opacity: 100 // 初始透明度为 100
          },
        ]
      },
    ],
  }
]);

const showEditor = ref(false);
const currentNode = ref(null);

const openEditor = (node) => {
  currentNode.value = node;
  showEditor.value = true;
};

const closeEditor = () => {
  showEditor.value = false;
};

</script>

<style scoped>
.layer-manager {
  width: 400px; /* 增大宽度 */
  max-width: 100%; /* 避免超出屏幕 */
  position: fixed;
  top: 100px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 1000;
  overflow: auto; /* 增加滚动条，避免溢出 */
}

.scrolling-label {
  display: inline-block;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  width: 120px; /* 固定宽度 */
}

.scrolling-label:hover {
  overflow: visible; /* 鼠标悬停时让文本完全显示 */
  white-space: normal; /* 允许换行 */
}

</style>
